<div class="tabs">
<input class="radioTab" type="radio" value="map" id="radioMap" ng-model="activeView">
    <label class="mapTab" for="radioMap">Kaart</label>
<input class="radioTab" type="radio" value="list" id="radioList" ng-model="activeView">
    <label class="listTab" for="radioList">Lijst</label>
</div>

<div id="container">

    <div style="width: 512px; height: 640px; float: left; border: 0;margin: 0; padding: 0;">
        <div id="map-canvas" ng-show="activeView == 'map'" style="width: 512px; height: 640px;"></div>
        <div id="listview" ng-show="activeView == 'list'" style="width: 512px; height: 640px;overflow-y: scroll;">
            <table>
                <tr ng-repeat="bunker in bunkers | filter:filterBunker">
                    <td>
                        <a href="api/v1/fotos/{{bunker.defaultfoto_id ? bunker.defaultfoto_id : -1}}/content"
                           target="_blank">
                            <img ng-src="api/v1/fotos/{{bunker.defaultfoto_id ? bunker.defaultfoto_id : -1}}/thumbnail"
                                 width="128" height="96">
                        </a>
                    </td>
                    <td class="listgroup">
                        <label>Uniek nummer:</label>{{bunker.bunker_id}}<br>
                        <label>Type:</label>{{bunker.type}}<br>
                        <label>Nummer:</label>{{bunker.nummer}}<br>
                        <label>Gemeente:</label>{{bunker.gemeente}}<br>
                        <label>Deelgemeente:</label>{{bunker.deelgemeente}}<br>
                        <label class="xcoo">x:</label>{{bunker.x}} <label class="ycoo">y:</label>{{bunker.y}}
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div style="width:200px; float: left;">

        <fieldset class="fieldgroup">
            <legend class="fieldgrouplegend">Bunker type:</legend>
            <label ng-repeat="bunkerType in bunkerTypes" class="checkbox" style="margin-left: 2px;">
                <input type="checkbox" ng-model="cb_bunkerTypes[bunkerType.value]" ng-change="filterMarkers()"/>
                {{bunkerType.label}}
                <img ng-src="img/measle{{bunkerTypeColors[bunkerType.value].fillColor.replace('#', '_')}}.png"/>
                <br/>
            </label>
        </fieldset>

        <fieldset class="fieldgroup">
            <legend class="fieldgrouplegend">Bunker code:</legend>
            <select style="width: 190px; margin-left: 4px;" ng-model="selectedBunkerCode" ng-change="filterMarkers()"
                    ng-options="bunkerCode.label for bunkerCode in bunkerCodes track by bunkerCode.code">
                <option value="">Alle</option>
            </select>
        </fieldset>

        <fieldset class="fieldgroup">
            <legend class="fieldgrouplegend">Gemeente:</legend>
            <select style="width: 190px; margin-left: 4px;" ng-model="selectedGemeente" ng-change="gemeenteChange()"
                    ng-options="gemeente.naam for gemeente in gemeentes | gemeenteIn:bunkerGemeentes track by gemeente.gemeente_id">
                <option value="">Alle</option>
            </select>
        </fieldset>

        <fieldset class="fieldgroup">
            <legend class="fieldgrouplegend">Deelgemeente:</legend>
            <select style="width: 190px; margin-left: 4px;" ng-model="selectedDeelgemeente"
                    ng-change="deelgemeenteChange()"
                    ng-options="deelgemeente.deelgemeente for deelgemeente in deelgemeentes | deelgemeenteIn:bunkerDeelgemeentes track by deelgemeente.deelgemeente_id">
                <option value="">Alle</option>
            </select>
        </fieldset>

        <fieldset class="fieldgroup">
            <legend class="fieldgrouplegend">Aanwezig:</legend>
            <label ng-repeat="bunkerToestand in bunkerToestanden" class="checkbox" style="margin-left: 2px;">
                <input type="checkbox" ng-model="cb_aanwezig[bunkerToestand.value]" ng-change="filterMarkers()"/>
                {{bunkerToestand.label}}<br/>
            </label>
        </fieldset>

        <!--<button ng-click="filterMarkers()">Filter</button>-->

    </div>

</div>